<template>
  <div class='financial'>
    <v-classification :title='"财务汇总"'></v-classification>
    <div class="financial_bottom">
      <ul class='financial-son'>
        <li v-for='(item,index) in list' :key='index'>
          <div class='numodule' :style='{backgroundColor:item.color}'>
            <div class='left'>
              <img :src="'./static/images/numodule-'+(index+1)+'.png'" alt="">
            </div>
            <div class='right'>
              <span v-if='!item.flag'>￥</span>
              <h3>
                <b>{{item.price}}</b>
              </h3>
              <p>{{item.content}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import classification from "../common/classification.vue";
export default {
  created() {
    this.$parent.flag = true;
  },
  data() {
    return {
      list: [
        { color: "#8f83ff", price: "0.0", content: "奖金余额" },
        { color: "#31d9a4", price: "0.0", content: "奖金总收入" },
        { color: "#22a8ee", price: "0.0", content: "奖金总支出" },
        { color: "#fa6464", price: "0.0", content: "复投余额" },
        { color: "#ffa200", price: "0.0", content: "复投总收入" },
        { color: "#87d936", price: "0.0", content: "复投总支出" },
        { color: "#87d936", price: "0.0", content: "提现总额" },
        {
          color: "#ffb145",
          price: "0.0",
          content: "RST总数量",
          flag: true
        },
        { color: "#fa5291", price: "正常", content: "考核状态", flag: true }
      ]
    };
  },
  methods: {},
  components: {
    "v-classification": classification
  },
  created() {
    u.financialsummary(data => {
      if (data && data.code == "200") {
        this.list[0].price = data.data.rewardBalance;
        this.list[1].price = data.data.rewardTotal;
        this.list[2].price = data.data.rewardCost;
        this.list[3].price = data.data.reCastBalance;
        this.list[4].price = data.data.recastTotal;
        this.list[5].price = data.data.recastCost;
        this.list[6].price = data.data.withdrawTotal;
        this.list[7].price = data.data.rstNum;
        this.list[8].price = '正常';
      }
    });
  }
};
</script>
<style lang='less' scoped>
.financial {
  background-color: white;
  height: 100%;
  > .financial_bottom {
    height: calc(100% - 50px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
    > .financial-son {
      box-sizing: border-box;
      padding: 0 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-top: 40px;
      > li {
        height: 198px;
        width: 32%;
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /*添加阴影*/
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 38px;
        > .numodule {
          height: 100%;
          width: 100%;
          display: flex;
          border-radius: 4px;
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
          > .left {
            line-height: 300px;
            height: 100%;
            padding-left: 48px;
            margin-right: 50px;
          }
          > .right {
            padding-top: 50px;
            position: relative;
            > span {
              position: absolute;
              color: white;
              font-size: 24px;
              left: -25px;
              top: 23%;
            }
            > h3 {
              font-family: "Myriad Pro";
              font-size: 40px;
              color: white;
            }
            > p {
              font-size: 18px;
              color: white;
            }
          }
          @media (max-width: 1600px) {
            > .left {
              padding-left: 28px;
              margin-right: 30px;
            }
          }
          @media (max-width: 1450px) {
            > .left {
              padding-left: 18px;
              margin-right: 20px;
            }
            > .right {
              > span {
                font-size: 18px;
              }
              > h3 {
                font-size: 24px;
                margin-bottom: 10px;
              }
              > p {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

